<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title> Insha - Css3 Responsive Sidebar Menu</title>

    <link href="../static/css/css2.css" rel="stylesheet">
    <link href='../static/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="../static/css/insha-style.css">


</head>

<body>

<div class="main" id="app">
    <div class="sidebar">
        <div class="logo_content">
            <div class="logo">
                <div class="logo_name">
                    <a href="#">
                        <i class='bx bxs-bank'></i>
                        银行业务管理系统
                    </a>
                </div>
            </div>
            <i class='bx bx-menu' id="toggle-menu-btn"></i>
        </div>
        <ul class="nav_list">

            <li>
                <a href="../online.html">
                    <i class='bx bx-yen'></i>
                    <span class="links_name">网上银行</span>
                </a>
                <span class="tooltip">网上银行</span>
            </li>
            <li>
                <a href="../counter.html">
                    <i class='bx bxs-user-account'></i>
                    <span class="links_name">银行柜面</span>
                </a>
                <span class="tooltip">银行柜面</span>
            </li>

        </ul>

    </div>
    <div class="home_content">
        <div class="text">银行柜面</div>
        <div class="rg_layout100">
            <div class="rg_left">
                <p>现金流查询</p>
                <p>CASH FLOW</p>

            </div>
            <div class="rg_center">
                <div class="rg_form">
                    <!--定义表单 form-->
                    <form action="#" method="">
                        <div>
                            <table class="ta1" border="1" cellspacing="0">
                                <tr class="ta01">
                                    <td>日期</td>
                                    <td>期初余额</td>
                                    <td>期末余额</td>
                                    <td>增加额</td>
                                    <td>减少额</td>
                                </tr>
                                <tr v-for="(item,index) in list">
                                    <td>{{item.productDate}}</td>
                                    <td>{{item.openingBalance}}</td>
                                    <td>{{item.endingBalance}}</td>
                                    <td>{{item.increaseBalance}}</td>
                                    <td>{{item.reduceBalance}}</td>
                                </tr>
                            </table>
                            <p>
                                <a href="#" id="one" @click="one()">首页</a>&nbsp&nbsp<a href="#"
                                                                                         @click="up()">上一页</a>&nbsp&nbsp{{page}}&nbsp&nbsp<a
                                    href="#"
                                    @click="down()">下一页</a>&nbsp&nbsp<a href="#" @click="last()">尾页</a>&nbsp&nbsp
                                <a>第&nbsp<input type="text" id="page" v-model="page" @blur="page0()">&nbsp页</a>
                            </p>
                        </div>

                    </form>


                </div>

            </div>

            <button id="bn10" @click="back1()">返回</button>
        </div>
    </div>

</div>

<script src="../static/js/scripts.js"></script>
<script src="../static/js/vue.js"></script>
<script src="../static/js/axios.min.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            list: [],
            page: 1,
            size: 6,
            total: null
        },
        mounted() {


            axios({
                method: "get",
                url: "http://localhost:8080/cashFlow/list?page=" + this.page + "&pageSize=" + this.size
            }).then(
                res => {
                    let code = res.data.code;
                    if (code === 200) {
                        this.list = res.data.data.list;
                        this.total = res.data.data.total
                    } else {
                        alert(res.data.message)
                    }
                }
            )

        },
        methods: {
            back1() {
                location.href = "../counter.html"
            },
            pt() {
                axios({
                    method: "get",
                    url: "http://localhost:8080/cashFlow/list?page=" + this.page + "&pageSize=" + this.size
                }).then(
                    res => {
                        let code = res.data.code;
                        if (code === 200) {
                            this.list = res.data.data.list;
                            this.total = res.data.data.total
                        } else {
                            alert(res.data.message)
                        }
                    }
                )
            },
            one() {
                this.page = 1;
                this.pt()
            },
            up() {
                if (this.page <= 1) {
                    this.page = 1;
                    let one = document.querySelector("#one");
                    one.style = "color:blue"
                } else {
                    this.page = this.page - 1;
                    let one = document.querySelector("#one");
                    one.style = ""
                }
                this.pt()

            },
            down() {
                var number = Math.round(this.total / this.size)
                if (this.page == number) {
                    let one = document.querySelector("#one");
                    one.style = "color:blue"
                } else {
                    this.page = this.page + 1;
                    let one = document.querySelector("#one");
                    one.style = ""
                }
                console.log(this.page)
                this.pt()
            },
            last() {
                var number = Math.round(this.total / this.size)
                this.page = number;
                this.pt()
            },
            page0() {
                if (this.page > this.total) {
                    this.page = this.total;
                    alert("当前页为最后一页")
                }
            }
        }
    })
</script>

</body>

</html>
